<template>
  <div>
    <h3>{{ $route.query.title || "Item" }}组件</h3>
    <p v-if="queryId === '001'">DNF简介</p>
    <p v-if="queryId === '002'">CF简介</p>
    <p v-if="queryId === '003'">LOL简介</p>

    <strong>props中age---{{ age }}</strong>
  </div>
</template>

<script>
export default {
  name: "Item",
  mounted() {
    // console.log(this.$route.params.id);
  },
  props: ["age"],
  data() {
    return {
      queryId: "",
    };
  },
  watch: {
    $route: {
      //不需要deep,因为动态路由切换的时候,直接替换的整个route对象
      immediate: true,
      handler() {
        console.log(this.$route.query.id);
        this.queryId = this.$route.query.id;
      },
    },
  },
};
</script>

<style></style>
